<template>
    <div class="container">
        <div class="jumbotron">
            <div class="row">
                <div class="col-md-6">
                    <h1>Aurelia</h1>
                </div>
                <div class="col-md-6">
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="run" click.delegate="run()">Create 1,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="runlots" click.delegate="runLots()">Create 10,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="add" click.delegate="add()">Append 1,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="update" click.delegate="update()">Update every 10th row</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="clear" click.delegate="clear()">Clear</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="swaprows" click.delegate="swapRows()">Swap Rows</button>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-hover table-striped test-data">
            <tbody>
                <tr repeat.for="item of store.data" class-name.bind="item.id === store.selected ? 'danger' : ''">
                    <td class="col-md-1">${item.id & oneTime}</td>
                    <td class="col-md-4">
                        <a click.delegate="select(item)">${item.label}</a>
                    </td>
                    <td class="col-md-1"><a click.delegate="remove(item)">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
                    </td>
                    <td class="col-md-6"></td>
                </tr>
            </tbody>
        </table>
        <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
    </div>

</template>
